<template>
    <div class="parent">
        <div class="topTitle">
            <span>掌上缴费</span>
        </div>
        <div class="inpu">
            <div class="inpTitle">
                <span :class="{active:pFlag}" @click="loginModel('password')">密码登录<i v-show="pFlag"><label></label> </i></span>
                <span :class="{active:mFlag}" @click="loginModel('message')">短信登录<i v-show="mFlag"><label></label> </i></span>
            </div>
        </div>
        <div class="cont">
            <router-view></router-view>
        </div>
        <div class="footerText">
            <div class="login_register">
                <span @click="forgetPassword">忘记密码?</span>    
                <span @click="registerBtn">注册</span>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: 'Login',
    data () {
        return {
            mFlag: false,
            pFlag: true
        }
    },
    methods: {
        loginModel (key) {
            switch(key){
                case 'message': 
                    this.mFlag = true
                    this.pFlag = false
                    this.$router.push({
                        path: '/Login/Message'
                    })
                break;
                case 'password': 
                    this.mFlag = false
                    this.pFlag = true
                    this.$router.push({
                        path: '/Login/Passwordl'
                    })
                break;
            }
        },
        registerBtn () {
            this.$router.push({
                path: '/Register'
            })
        },
        forgetPassword () {
            console.log('忘记密码')
        }
    }
}
</script>
<style scoped lang="less">
.parent{
    width: 100%;
    height: 100%;
    background:linear-gradient(360deg,rgba(255,199,38,1) 0%,rgba(249,151,22,1) 100%);
    padding-top: 3.84rem;
}
.topTitle{
    width: 100%;
    height: 1.333333rem;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    span{
        font-size:48px;
        font-family:hzgb;
        color:rgba(255,255,255,1);
        line-height:48px;
        letter-spacing:4px;
        text-shadow:0px 2px 4px rgba(76,33,0,0.24);
    }
}
.inpu{
    width: 100%;
    height: 1.333333rem;
    margin-top: 2.853333rem;
    padding: 0 1.333333rem;
    .inpTitle{
        width: 100%;
        height: 1.333333rem;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        background: #fff;
        span{
            display: block;
            width: 50%;
            height: 100%;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            font-size:14px;
            font-family:Arial-BoldMT;
            font-weight:normal;
            // color:rgba(255,199,38,1);
            line-height:16px;
            letter-spacing:1px;
            color: #ccc;
            position: relative;
            i{
                position: absolute;
                bottom: 0;
                left: 0;
                display: block;
                width: 100%;
                height: 100%;
                border-bottom:3px solid rgba(255,199,38,1);
                label{
                    position: absolute;
                    bottom: 0;
                    left: 50%;
                    display: block;
                    width: 0;
                    height: 0;
                    border: 6px solid transparent;
                    border-bottom: 6px solid rgba(255,199,38,1);
                }
            }
        }
        .active{
            color: rgba(255,199,38,1);
        }
    }
}
.cont{
    width: 100%;
    height: 4.56rem;
}
.footerText{
    width: 100%;
    height: .533333rem;
    padding: 0 1.333333rem;
    margin-top: .4rem;
    .login_register{
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        span{
            font-size:14px;
            font-family:ArialMT;
            color:rgba(177,95,88,1);
            line-height:16px;
            letter-spacing:1px;
        }
    }
}

</style>
